<template>
  <div class="title">
    <div class="title_top">社矫对象</div>
    <div id="warPiePersonEchart" :style="{ float: 'left', width: '80%', height: '250px' }"></div>
  </div>
</template>
<script>
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import storage from 'store'
import moment from 'moment'
import { countCorrectPersonInfo } from '@/api/home/apl_correct_statistic.js'
import * as echarts from 'echarts'
import { findUserTree } from '@/api/base/ha_user'
export default {
  name: 'LeftTop',
  data () {
    return {
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门
      sum: null,
      parentId: []
    }
  },
  created () {
    this.getcountCorrectPersonInfo()
  },
  methods: {
    async getcountCorrectPersonInfo () {
      const res1 = await findUserTree('3601001000', { type: 1, isuser: false })
      if (res1.code == 0 && res1.data) {
        this.parentId = []
        this.recursionDeptid(this.parentId, this.currentDept.id, res1.data)
        const res = await countCorrectPersonInfo(this.parentId)
        const arr = res.data.map(item => {
          return {
            key: item.key,
            name: item.name,
            value: item.count
          }
        })
        const total = arr.find(item => item.key == 'personTotal')
        const data = arr.filter(item => item.key != 'countTypeFocus' && item.key != 'personTotal')
        console.log(data)
        this.sum = total.value
        this.$emit('definitionEvent', data)
        this.initChart(data)
      } else {
        this.$message.error(res1.msg)
      }
    },
    // 递归查询当前节点的id和他的下级id
    recursionDeptid (result, id, treeData, isSave = false) {
      treeData.map(v => {
        if (v.id == id || isSave) {
          result.push(v.id)
          this.recursionDeptid(result, id, v.children, true)
          return
        }
        if (v.children && v.children.length > 0) {
          this.recursionDeptid(result, id, v.children)
        }
      })
    },
    initChart (data) {
      const myChart = echarts.init(document.getElementById('warPiePersonEchart')) // 图标初始化
      myChart.setOption({
        title: {
          text: '社矫对象',
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal',
            color: '#000'
          },
          subtext: '{value|' + this.sum + '}{unit| 人}',
          subtextStyle: {
            rich: {
              value: {
                fontSize: 16,
                fontWeight: 'bold',
                color: '#000'
              },
              unit: {
                fontSize: 12,
                fontWeight: 'normal',
                color: '#999'
              }
            }
          },
          top: '35%',
          left: 'center'
        },
        legend: {
          type: 'plain',
          show: true,
          bottom: '0%',
          // left: 'center',
          itemGap: 20,
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            family: 'Arial',
            fontSize: 16,
            color: '#bdbdbd'
          }
        },
        series: [
          {
            name: 'overViewEcharts',
            type: 'pie',
            radius: ['48%', '65%'],
            bottom: '12%',
            avoidLabelOverlap: true,
            padAngle: -5,
            label: {
              color: '#000000',
              fontStyle: 'normal',
              fontWeight: 'lighter',
              fontFamily: 'MicrosoftYaHei',
              fontSize: 16,
              // padding: [23, -80],
              formatter: '{b|{b}} {c|{c}}{a|人}',
              rich: {
                a: {
                  fontFamily: 'MicrosoftYaHei',
                  fontWeight: '400',
                  fontSize: 16,
                  color: '#bdbdbd',
                  lineHeight: 20
                },
                b: {
                  fontFamily: 'MicrosoftYaHei',
                  fontWeight: '400',
                  fontSize: 16,
                  color: '#bdbdbd',
                  lineHeight: 20
                },
                c: {
                  fontFamily: 'Myriad Pro',
                  fontWeight: '600',
                  fontSize: 16,
                  color: '#000000',
                  lineHeight: 20
                }
              }
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 32,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: data,
            color: ['#CF3730 ', '#FF9F00 ', '#3496FB', '#00B853']
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  display: flex;
  flex-direction: column;
  // overflow: auto;
  .title_top {
    margin-top: 30px;
    padding-bottom: 16px;
    border-bottom: 3px solid #f5f5f5;
    font-size: 23px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #2c2c2c;
  }
  .title_list {
    max-height: 40vh;
    overflow: auto;
    width: 100%;
  }
  .title_item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
    .title_item_left {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2c2c2c;
      width: 80%;
    }
    .title_item_left:hover {
      color: #1890ff;
    }
    .title_item_right {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #696969;
      width: 20%;
      direction: rtl;
      padding-right: 15px;
      min-width: 120px;
    }
  }
}
</style>
